<template>
  <div class="vs-hed">
    <div class="vs-d1">
      <div class="d1-css">
        <p>当前票数</p>
        <p>2640</p>
      </div>
      <div class="d1-css">
        <p>当前排名</p>
        <p>1</p>
      </div>
    </div>
    <p>距离活动结束</p>
    <ul class="ulcount">
      <li v-for="(item,index) in timeData" :key="index">
        <p>{{item.dy}}</p>
        <p>{{item.txt}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
      name: "Countdown",
      data(){
        return {
          day:0,
          hour:0,
          minete:0,
          secnd:0
        }
      },
      mounted(){
        setInterval(function () {
          var date = new Date();
          var date2 = new Date(2019,0,31,23,59,59);
          var s = date2 - date;
          this.day = parseInt(s/1000/60/60/24);
          s-=this.day*24*60*60*1000;
          this.hour = parseInt(s/1000/60/60);
          s-=this.hour*60*60*1000;
          this.minete = parseInt(s/1000/60);
          s-=this.minete*60*1000;
          this.secnd = parseInt(s/1000);
          this.secnd = formatTime(this.secnd);
          this.minete = formatTime(this.minete);
          this.hour = formatTime(this.hour);
          this.day = formatTime(this.day);
          function formatTime(t){
            return t < 10 ? "0"+t : t;
          }
        }.bind(this),1000)
      },
      computed:{
        timeData(){
          return [
            {dy:this.day,txt:'天'},
            {dy:this.hour,txt:'时'},
            {dy:this.minete,txt:'分'},
            {dy:this.secnd,txt:'秒'}
          ]
        }
      }
    }
</script>

<style scoped>
  .vs-hed{
    text-align: center;
    border-bottom: 2px solid #dcdcdc;
    margin-bottom: 20px;
  }
  .vs-hed .vs-d1{
    display: flex;
    justify-content: space-around;
  }
  .vs-hed .vs-d1 .d1-css{
    width: 190px;
    height: 80px;
    border: 2px solid #884ca4;
    border-radius: 10px;
    padding-top: 7px;
  }
  .vs-hed .vs-d1 .d1-css p{
    font-size: 26px;
    color: #884ca4;
  }
  .vs-hed>p{
    font-size: 26px;
    padding: 20px 0;
  }
  .ulcount{
    display: flex;
    justify-content: center;
  }
  .ulcount li{
    margin-right: 36px;
  }
  .ulcount li:last-child{
    margin-right: 0;
  }
  .ulcount li p:nth-child(1){
    width: 60px;
    height: 34px;
    background: #e98345;
    color: #fff;
    font-size: 26px;
  }
  .ulcount li p:nth-child(2){
    font-size: 26px;
    padding: 20px 0;
  }
</style>
